<template>
    <div class="options-panel">
        <div v-show="currentPanel == 'property'">

            <div class="panel-from">
                <div class="panel-form-item">
                    <div class="item-label">显示位置</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.mode" placeholder="请选择" style="width:100%">
                            <a-select-option value="left">左侧</a-select-option>
                            <a-select-option value="right">右侧</a-select-option>
                            <a-select-option value="alternate">轮流</a-select-option>
                        </a-select>
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">排序</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.reverse" placeholder="请选择" style="width:100%">
                            <a-select-option :value="false">正序</a-select-option>
                            <a-select-option :value="true">倒序</a-select-option>
                        </a-select>
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

                <a-divider orientation="left">选项配置</a-divider>

                <div class="option-list-wrap">
                    <draggable tag="ul" class="option-list" :list="selectItem.componentProps.options"
                        v-bind="dragOption">
                        <template #item="{ element,index }">
                            <li class="option-lsit-item">
                                <HolderOutlined class="option-handle" />
                                <a-input v-model:value="element.text" placeholder="text" />
                                <a-input type="color" v-model:value="element.color" placeholder="color"
                                    style="width: 50px;padding: 3px;" />
                                <CloseCircleFilled class="delete-btn" title="删除选项" @click="deleteOption(index)" />
                            </li>
                        </template>
                    </draggable>
                    <a-button type="primary" size="small" @click="addOption">新增选项</a-button>
                </div>

            </div>
        </div>

        <div v-show="currentPanel == 'style'">
        </div>

        <!-- <div v-show="currentPanel == 'actions'">
            <a-alert message="正在开发中..." type="warning" show-icon />
        </div> -->
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    name: "timelineOptions",
    components: {
        draggable,
    },
    props: {
        currentPanel: {
            type: String,
            default: "property"
        },
        selectItem: {
            type: Object,
        }
    },
    data() {
        return {
            item: {},
            dragOption: {
                animation: 180,
                handle: '.option-handle'
            },
        }
    },
    methods: {

        /**
         * @method
         * @param {String} index 需要删除的选项下标 
         * @desc 删除选项
         */
        deleteOption(index) {
            this.selectItem.componentProps.options.splice(index, 1);
        },


        /**
         * @method
         * @desc 添加选项
         */
        addOption() {
            this.selectItem.componentProps.options.push({
                label: '',
                value: '',
            })
        },

    },
    created() {
    },
}
</script>

<style lang="less" scoped>
</style>